<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> js操作listbox示例 </TITLE>
<META CONTENT="EditPlus">
<META CONTENT="">
<META CONTENT="">
<META CONTENT="">
</HEAD>

<BODY>
<script language='javascript'>
/**********************操作ListBox的相关函数***START*********************/


/*
* 把源列表sourcelist中的所有内容移到目标列表targetlist中去
*/
function moveAll(sourceList, targetList){
            var lst1=window.document.getElementById(sourceList);
    var lst2=window.document.getElementById(targetList);
            var length = lst1.options.length;
            for(var i=0;i<length;i++)
            {
                var v = lst1.options[i].value;
                var t = lst1.options[i].text;
                if(!hasValue(targetList,v)){
      //目录列表中没有当前值，则加入
      lst2.options[lst2.options.length] = new Option(t,v,true,true);   
     }
            }
    //把源列表中的内容移除
    removeAll(sourceList);
        }

   /*
   * 将id为listId的列表中的内容全部移除
   */
        function removeAll(listId)
        {
            var lst=window.document.getElementById(listId);
            var length = lst.options.length;
            for(var i=length;i>0;i--)
            {
                lst.options[i-1].parentNode.removeChild(lst.options[i-1]);
            }   
        }
       
   /*
   * 将sourceList中的选中项移动到targetList中去
   */
        function moveSelect(sourceList, targetList)
        {
            var lst1=window.document.getElementById(sourceList);
            var lst2=window.document.getElementById(targetList);
    var length = lst1.options.length;
    for(var i=0;i<length;i++){
     var lstindex=lst1.selectedIndex;
     if(lstindex<0)
      return;
     var v = lst1.options[lstindex].value;
     var t = lst1.options[lstindex].text;
     if(!hasValue(targetList,v)){
      lst2.options[lst2.options.length] = new Option(t,v,true,true);   
     }
     removeSelect(sourceList);
    }
               
        }
       
   /*
   * 删除列表listId中的选中项(删除的为索引值最小的一项)
   */
        function removeSelect(listId)
        {
            var lst2=window.document.getElementById(listId);
            var lstindex=lst2.selectedIndex;
            if(lstindex>=0)
            {
                var v = lst2.options[lstindex].value+";";
                lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]);
            }
               
        }


   /*
   * 判断id为listId列表中有没有给定的值v
   */
   function hasValue(listId,v){
    var lst = window.document.getElementById(listId);
    var length = lst.options.length;
    for(var i = 0; i < length; i++){
     var vv = lst.options[i].value;
     if(v == vv){
      return true;
     }
    }
    return false;
   }
      /**********************操作ListBox的相关函数***END*********************/
</script>
<h3></h3>
   <form action='#'>
    <table>
     <tr>
      <td>
        <input type="text" list="options" name="option">  
        <datalist id="options">  
          <option value="Option 1">  
          <option value="Option 2">  
          <option value="Option 3">  
        </datalist>          
       <label>历史技能选择</label>
       <select multiple='true' style='width:100px;height:420px'>
       <option>转盘1</option>
       <option>转盘2</option>
       <label>---------------</label>
       <option>选1:</option>
       <option>选2:</option>
       <option>选3:</option>
       <option>选4:</option>
       <option>选5:</option>
       <option>选6:</option>
       <option>选7:</option>
       <option>选8:</option>
       <option>选9:</option>
       <option>选10:</option>
       <option>选11:</option>
       <option>选12:</option>
       <option>选13:</option>
       <option>选14:</option>
       <option>选15:</option>
       <option>选16:</option>
       <option>选17:</option>
       <option>选18:</option>
       <option>选19:</option>
       <option>选20:</option>
       </select>
      </td>
      <td>
       <select style='width:100px;height:120px'>
       </select>
      </td>
     </tr>
    </table>
   </form>
</BODY>
</HTML>